<template>
	<view class="infolist">
		<view class="tabs_con">
			<view class="tab">
				<v-tabs :tabs="tabs" @changeType="getList" :selected='selTab' :live="true" />
			</view>
			<!-- <view class="tabCon" v-if="subTabs.length"> -->
			
		</view>
		<view class="tabs_con_bottom" :style="{height: tabHeight + 'px'}">
			<!-- <view class="tab">
				<v-tabs :tabs="tabs" @changeType="getList" :selected='selTab' />
			</view> -->
			<!-- <view class="tabCon" v-if="subTabs.length"> -->
			<!-- <view class="tabCon">
				<view class="sub">
					<view :class="subTabsActId == item.label ? 'item_act' : 'item'" v-for="(item, index) in subTabs"
						:key="index" @click="changeSub(item.label)">
						{{item.text}}
					</view>
				</view>
			</view> -->
		</view>
		<view class="tabCon" v-if="subTabs.length">
			<view class="sub">
				<view :class="subTabsActId == item.label ? 'item_act' : 'item'" v-for="(item, index) in subTabs"
					:key="index" @click="changeSub(item.label)">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="page" v-if='leftList.length'>
			<view class="left" ref="left">
				<view v-for="(item,i) in leftList" :key="i" @click='goDetail(item)'>
					<view v-if="item.fileType == 0">
						<view class="mar_bot24" v-if='item.imgPath'>
							<image class="image" :src="imgBasePath + item.imgPath" mode="widthFix"></image>
							<view class="title">{{item.title}}</view>
							<view class="per" v-if="item.tabType == '1' || item.tabType == '2'">
								<view class="per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text :class="item.tabType == '1' ? 'zx_t' : ''">{{item.nickName || ''}}</text>
								</view>
								<view class="per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
						<view class="no_img" v-if='!item.imgPath'>
							<text class="zx">
								{{item.title}}
							</text>
							<view class="per" v-if="item.tabType == '1' || item.tabType == '2'">
								<view class="per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text :class="item.tabType == '1' ? 'zx_t' : ''">{{item.nickName || ''}}</text>
								</view>
								<view class="per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="video_wrap" v-if="item.fileType == 1">
						<image class="play" :src="`${imgBasePath}/statics/std/static/bofang.png`"
							mode=""></image>
						<video class="video" :show-fullscreen-btn="false" :show-play-btn="false"
							:show-center-play-btn="false" :src="imgBasePath + item.imgPath"></video>
						<view class="video_det">
							<view class="video_loc">
								<view class="video_loc_wrap">
									<image :src='`${imgBasePath}/statics/std/static/loc.png`'>
									</image>
									<text>{{item.placeName || item.addr}}</text>
								</view>
							</view>
					
							<view class="video_per">
								<view class="video_per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text>{{item.nickName || ''}}</text>
								</view>
								<view class="video_per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye_gray.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
					
					</view> -->
				</view>
			</view>
			<view class="right" ref="right">
				<view v-for="(item,i) in rightList" :key="i" @click='goDetail(item)'>
					<view v-if="item.fileType == 0">
						<view class="mar_bot24" v-if='item.imgPath'>
							<image class="image" :src="imgBasePath + item.imgPath" mode="widthFix"></image>
							<view class="title">{{item.title}}</view>
							<view class="per" v-if="item.tabType == '1' || item.tabType == '2'">
								<view class="per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text :class="item.tabType == '1' ? 'zx_t' : ''">{{item.nickName || ''}}</text>
								</view>
								<view class="per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
						<view class="no_img" v-if='!item.imgPath'>
							<text class="zx">
								{{item.title}}
							</text>
							<view class="per" v-if="item.tabType == '1' || item.tabType == '2'">
								<view class="per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text :class="item.tabType == '1' ? 'zx_t' : ''">{{item.nickName || ''}}</text>
								</view>
								<view class="per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="video_wrap" v-if="item.fileType == 1">
						<image class="play" :src="`${imgBasePath}/statics/std/static/bofang.png`"
							mode=""></image>
						<video class="video" :show-fullscreen-btn="false" :show-play-btn="false"
							:show-center-play-btn="false" :src="imgBasePath + item.imgPath"></video>
						<view class="video_det">
							<view class="video_loc">
								<view class="video_loc_wrap">
									<image :src='`${imgBasePath}/statics/std/static/loc.png`'>
									</image>
									<text>{{item.placeName || item.addr}}</text>
								</view>
							</view>
					
							<view class="video_per">
								<view class="video_per_lf">
									<img :src="imgBasePath + item.avatar" alt="" v-if="item.avatar">
									<text>{{item.nickName || ''}}</text>
								</view>
								<view class="video_per_rt">
									<img :src="`${imgBasePath}/statics/std/static/eye_gray.png`" alt="">
									<text>{{item.viewNum || 0}}</text>
								</view>
							</view>
						</view>
					
					</view> -->
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<image :src="`${imgBasePath}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
		<!-- </scroll-view> -->
		<!-- <view class="goRep" @click="goReport()">
			<image :src='`${imgBasePath}/statics/std/static/new/goRep.png`'></image>
		</view> -->
	</view>

</template>

<script>
	import {
		requestGet
	} from '@/utils/request.js'
	let img_api = process.env.VUE_APP_BASEURL_IMG_API;
  const port_api = process.env.VUE_APP_BASEURL_API;
	import vTabs from '@/components/tabs.vue'
	export default {
		data() {
			return {
				tabs: [],
				imgBasePath: img_api,
				leftList: [], //左边列图片
				rightList: [], //右边列图片
				leftHeight: 0, //左边列高度
				rightHeight: 0, //右边列高度
				columnWidth: 0, //列宽度
				subTabs: [],
				pages: {
					pageNum: 1,
					pageSize: 10,
				},
				selTab: '',
				texts: [],
				tabAct: '',
				subTabsActId: '',
				loadMore: true,
				scrollTop: 0,
				tabHeight: 0,
				nowGet: null,
        portApi: port_api 
			}
		},
		components: {
			vTabs
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.columnWidth = res.windowWidth * 0.48
					// this.setWaterFallLayout()
					console.log('this.columnWidth', this.columnWidth)
				}
			})
			this.getTabs()
			this.getTabHeight((num) => this.tabHeight = num)
		},
		methods: {
			getTabHeight(cb) {
				const query = wx.createSelectorQuery()
				query.select('.tabs_con').boundingClientRect()
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					cb(res[0].height)
				});
			},
			getScrollTop(cb) {
				const query = wx.createSelectorQuery()
				query.select('.tabs_con').boundingClientRect()
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					console.log('获取页面滚动的高度', res)
					cb(res[1].scrollTop)
				});
			},
			onReachBottom() {
				//todo
				this.getScrollTop(num => this.scrollTop = num)
				console.log('到底了', this.loadMore)
				if (this.loadMore) {
					this.getMore()
				}
			},
			goDetail(item) {
				if (item.tabType == '1') {
					uni.navigateTo({
						url: '/page_index/news/detail?id=' + item.id
					})
				} else if (item.tabType == '2') {
					if (item.fileType == '0') {
						//todo
						uni.navigateTo({
							url: '/page_my/travels/detail?id=' + item.id
						})
					} else if (item.fileType == '1') {
						//todo
						uni.navigateTo({
							url: '/page_my/travels/detailVideo?id=' + item.id
						})
					}

				} else if (item.tabType == '3') {
					uni.navigateTo({
						url: '/page_mall/detail/detail?id=' + item.id
					})

				} else if (item.tabType == '4') {
					uni.navigateTo({
						url: '/page_index/restaurant/detail?id=' + item.id
					})

				} else if (item.tabType == '5') {
					uni.navigateTo({
						url: '/page_index/hotel/detail?id=' + item.id
					})

				}
			},
			goReport() {
				uni.navigateTo({
					url: '/page_my/travels/release'
				})
			},
			changeSub(type) {
				if (this.nowGet) {
					this.nowGet.abort()
					this.nowGet = null
				}
				this.texts = []
				this.subTabsActId = type
				this.leftList = []
				this.rightList = []
				this.leftHeight = 0
				this.rightHeight = 0
				this.pages = {
					pageNum: 1,
					pageSize: 10,
				}
				this.getApplet(type)
			},
			getMore() {
				if (this.subTabsActId) {
					this.getApplet(this.subTabsActId)
				} else if (this.tabAct) {
					this.getTexts(this.tabAct)
				}
			},
			getList(type) {
				console.log('传递过来得', type)
				if (this.nowGet) {
					this.nowGet.abort()
					this.nowGet = null
				}
				this.texts = []
				this.leftList = []
				this.rightList = []
				this.leftHeight = 0
				this.rightHeight = 0
				this.tabAct = type.type
				this.pages = {
					pageNum: 1,
					pageSize: 10,
				}
				this.getTexts(type.type)
			},
			getTabs() {
				requestGet('/home/tab/list', {}, '/baseplatform').then(res => {
					if (res.code === 200) {
						const repStr = JSON.parse(JSON.stringify(res.data).replace(new RegExp('id', 'g'), 'label')
							.replace(new RegExp('tabName', 'g'), 'text'))
						this.tabs = repStr
						this.selTab = repStr[0].label
						// this.getTexts(repStr[0].label)
					}
				}).catch((err) => console.log('错误了', err))
			},
			getApplet(type) {
				let _this = this
				this.nowGet = uni.request({
					url: this.portApi + "/baseplatform/applet/notes/list",
					data: {
						pageNum: this.pages.pageNum,
						pageSize: this.pages.pageSize,
						typeId: type,
						status: 1
					},
					header: {
						"content-type": "application/json;charset=UTF-8",
						Authorization: "Bearer " + uni.getStorageSync("X-Token"),
					},
					method: "GET",
					dataType: "json",
					success: (res) => {
						console.log('进入到新的请求这里了', res)
						this.$nextTick(() => {
							if (res.data.code === 200) {
								if (this.pages.pageNum == 1) {
									_this.texts = res.data.rows
								} else {
									_this.texts.push(...res.data.rows);
								}
								if (this.texts.length < res.data.total) {
									this.loadMore = true;
									this.pages.pageNum = this.pages.pageNum + 1;
								} else {
									this.loadMore = false;
								}
								this.setWaterFallLayout(res.data.rows)
								uni.pageScrollTo({
								   scrollTop: this.scrollTop,
								   duration: 0,
								})
							} else {
								_this.texts = [];
							}
						})
				
					},
					fail: () => {
						_this.texts = [];
					}
				});
				// requestGet('/applet/notes/list', {
				// 	...this.pages,
				// 	typeId: type,
				// 	status: 1
				// }, '/baseplatform').then(res => {
				// 	if (res.code === 200) {
				// 		this.$nextTick(() => {
				// 			this.texts.push(...res.rows);
				// 			console.log('点击了游记了', this.texts)
				// 			if (this.texts.length < res.total) {
				// 				this.loadMore = true;
				// 				this.pages.pageNum = this.pages.pageNum + 1;
				// 			} else {
				// 				this.loadMore = false;
				// 			}
				// 			this.setWaterFallLayout(res.rows)
				// 			uni.pageScrollTo({
				// 			   scrollTop: this.scrollTop,
				// 			   duration: 0,
				// 			})
				// 		})
						
				// 	}
				// }).catch((err) => console.log('错误了', err))
			},
			getTexts(type, sub) {
				// this.texts = []
				// this.leftList = []
				// this.rightList = []
				// this.leftHeight = 0
				// this.rightHeight = 0
				// this.tabAct = type
				if (this.tabs.find(item => item.label == type) && this.tabs.find(item => item.label == type).children) {
					this.subTabs = this.tabs.find(item => item.label == type)?.children
					if (this.subTabs.length) {
						this.subTabsActId = this.subTabs[0].label
						if (type == 72) {
							this.getApplet(this.subTabs[0].label)
						}
					} 
				} else {
					this.subTabs = []
					this.subTabsActId = ''
					//综合推荐
					if (type == 70) {
						let _this = this
						console.log('进入到新的请求这里了111')
						this.nowGet = uni.request({
							url: this.portApi + "/baseplatform/home/reco/data",
							data: {
								pageNum: this.pages.pageNum,
								pageSize: this.pages.pageSize,
							},
							header: {
								"content-type": "application/json;charset=UTF-8",
								Authorization: "Bearer " + uni.getStorageSync("X-Token"),
							},
							method: "GET",
							dataType: "json",
							success: (res) => {
								console.log('进入到新的请求这里了', res)
								this.$nextTick(() => {
									if (res.data.code === 200) {
										if (this.pages.pageNum == 1) {
											_this.texts = res.data.data
										} else {
											_this.texts.push(...res.data.data);
										}
										if (this.texts.length < res.data.total) {
											this.loadMore = true;
											this.pages.pageNum = this.pages.pageNum + 1;
										} else {
											this.loadMore = false;
										}
										this.setWaterFallLayout(res.data.data)
										uni.pageScrollTo({
										   scrollTop: this.scrollTop,
										   duration: 0,
										})
									} else {
										_this.texts = [];
									}
								})
							},
							fail: () => {
								_this.texts = [];
							}
						});
						// requestGet('/home/reco/data', {
						// 	...this.pages
						// }, '/baseplatform').then(res => {
						// 	if (res.code === 200) {
						// 		if (this.pages.pageNum == 1) {
						// 			this.texts = res.data
						// 		} else {
						// 			this.texts.push(...res.data);
						// 		}
						// 		if (this.texts.length < res.total) {
						// 			this.loadMore = true;
						// 			this.pages.pageNum = this.pages.pageNum + 1;
						// 		} else {
						// 			this.loadMore = false;
						// 		}
						// 		this.setWaterFallLayout(res.data)
						// 		uni.pageScrollTo({
						// 		   scrollTop: this.scrollTop,
						// 		   duration: 0,
						// 		})
						// 	}
						// }).catch((err) => console.log('错误了', err))
						//资讯
					} else if (type == 9) {
						let _this = this
						this.nowGet = uni.request({
							url: this.portApi + "/baseplatform/home/content/list",
							data: {
								pageNum: this.pages.pageNum,
								pageSize: this.pages.pageSize,
								channelId: type
							},
							header: {
								"content-type": "application/json;charset=UTF-8",
								Authorization: "Bearer " + uni.getStorageSync("X-Token"),
							},
							method: "GET",
							dataType: "json",
							success: (res) => {
								console.log('进入到新的请求这里了', res)
								this.$nextTick(() => {
									if (res.data.code === 200) {
										if (this.pages.pageNum == 1) {
											_this.texts = res.data.rows
										} else {
											_this.texts.push(...res.data.rows);
										}
										if (this.texts.length < res.data.total) {
											this.loadMore = true;
											this.pages.pageNum = this.pages.pageNum + 1;
										} else {
											this.loadMore = false;
										}
										this.setWaterFallLayout(res.data.rows)
										uni.pageScrollTo({
										   scrollTop: this.scrollTop,
										   duration: 0,
										})
									} else {
										_this.texts = [];
									}
								})
						
							},
							fail: () => {
								_this.texts = [];
							}
						});
						// requestGet(`/home/content/list`, {
						// 	...this.pages,
						// 	channelId: type
						// }, '/baseplatform').then(res => {
						// 	if (res.code === 200) {
								
						// 		this.texts.push(...res.rows);
						// 		// console.log('获取的这些数据', this.texts)
						// 		if (this.texts.length < res.total) {
						// 			this.loadMore = true;
						// 			this.pages.pageNum = this.pages.pageNum + 1;
						// 		} else {
						// 			this.loadMore = false;
						// 		}
						// 		console.log('更新后的texts', this.texts)
						// 		this.setWaterFallLayout(res.rows)
						// 		uni.pageScrollTo({
						// 		   scrollTop: this.scrollTop,
						// 		   duration: 0,
						// 		})
						// 	}
						// }).catch((err) => console.log('错误了', err))
					} else if (type == 73) {
						let _this = this
						this.nowGet = uni.request({
							url: this.portApi + "/shop/mobile/goods/list",
							data: {
								pageNum: this.pages.pageNum,
								pageSize: this.pages.pageSize,
							},
							header: {
								"content-type": "application/json;charset=UTF-8",
								Authorization: "Bearer " + uni.getStorageSync("X-Token"),
							},
							method: "GET",
							dataType: "json",
							success: (res) => {
								console.log('进入到新的请求这里了', res)
								this.$nextTick(() => {
									if (res.data.code === 200) {
										if (this.pages.pageNum == 1) {
											_this.texts = res.data.rows
										} else {
											_this.texts.push(...res.data.rows);
										}
										if (this.texts.length < res.data.total) {
											this.loadMore = true;
											this.pages.pageNum = this.pages.pageNum + 1;
										} else {
											this.loadMore = false;
										}
										this.setWaterFallLayout(res.data.rows)
										uni.pageScrollTo({
										   scrollTop: this.scrollTop,
										   duration: 0,
										})
									} else {
										_this.texts = [];
									}
								})
						
							},
							fail: () => {
								_this.texts = [];
							}
						});
						// requestGet("/mobile/goods/list", this.pages, '/shop').then(res => {
						// 	if (res.code === 200) {
						// 		console.log('获取了文创', res)
						// 		if (res.rows.length > 0) {
						// 			this.texts.push(...res.rows);
						// 			// console.log('获取的这些数据', this.texts)
						// 			if (this.texts.length < res.total) {
						// 				this.loadMore = true;
						// 				this.pages.pageNum = this.pages.pageNum + 1;
						// 			} else {
						// 				this.loadMore = false;
						// 			}
						// 			this.setWaterFallLayout(res.rows)
						// 			uni.pageScrollTo({
						// 			   scrollTop: this.scrollTop,
						// 			   duration: 0,
						// 			})
						// 		}
						// 	}
						// })
					} else if (type == 75) {
						let _this = this
						this.nowGet = uni.request({
							url: this.portApi + "/shop/mobile/hotel/list",
							data: {
								pageNum: this.pages.pageNum,
								pageSize: this.pages.pageSize,
							},
							header: {
								"content-type": "application/json;charset=UTF-8",
								Authorization: "Bearer " + uni.getStorageSync("X-Token"),
							},
							method: "GET",
							dataType: "json",
							success: (res) => {
								console.log('进入到新的请求这里了', res)
								this.$nextTick(() => {
									if (res.data.code === 200) {
										if (this.pages.pageNum == 1) {
											_this.texts = res.data.rows
										} else {
											_this.texts.push(...res.data.rows);
										}
										if (this.texts.length < res.data.total) {
											this.loadMore = true;
											this.pages.pageNum = this.pages.pageNum + 1;
										} else {
											this.loadMore = false;
										}
										this.setWaterFallLayout(res.data.rows)
										uni.pageScrollTo({
										   scrollTop: this.scrollTop,
										   duration: 0,
										})
									} else {
										_this.texts = [];
									}
								})
						
							},
							fail: () => {
								_this.texts = [];
							}
						});
						// requestGet("/mobile/hotel/list", this.pages, '/shop').then(res => {
						// 	if (res.code === 200) {
						// 		console.log('获取了酒店', res)
						// 		if (res.rows.length > 0) {
						// 			this.texts.push(...res.rows);
						// 			// console.log('获取的这些数据', this.texts)
						// 			if (this.texts.length < res.total) {
						// 				this.loadMore = true;
						// 				this.pages.pageNum = this.pages.pageNum + 1;
						// 			} else {
						// 				this.loadMore = false;
						// 			}
						// 			this.setWaterFallLayout(res.rows)
						// 			uni.pageScrollTo({
						// 			   scrollTop: this.scrollTop,
						// 			   duration: 0,
						// 			})
						// 		}
						// 	}
						// })
					} else if (type == 74) {
						let _this = this
						this.nowGet = uni.request({
							url: this.portApi + "/shop/mobile/restaurant/list",
							data: {
								pageNum: this.pages.pageNum,
								pageSize: this.pages.pageSize,
							},
							header: {
								"content-type": "application/json;charset=UTF-8",
								Authorization: "Bearer " + uni.getStorageSync("X-Token"),
							},
							method: "GET",
							dataType: "json",
							success: (res) => {
								console.log('进入到新的请求这里了', res)
								this.$nextTick(() => {
									if (res.data.code === 200) {
										if (this.pages.pageNum == 1) {
											_this.texts = res.data.rows
										} else {
											_this.texts.push(...res.data.rows);
										}
										if (this.texts.length < res.data.total) {
											this.loadMore = true;
											this.pages.pageNum = this.pages.pageNum + 1;
										} else {
											this.loadMore = false;
										}
										this.setWaterFallLayout(res.data.rows)
										uni.pageScrollTo({
										   scrollTop: this.scrollTop,
										   duration: 0,
										})
									} else {
										_this.texts = [];
									}
								})
						
							},
							fail: () => {
								_this.texts = [];
							}
						});
						// requestGet("/mobile/restaurant/list", this.pages, '/shop').then(res => {
						// 	if (res.code === 200) {
						// 		console.log('获取了餐饮', res)
						// 		if (res.rows.length > 0) {
						// 			this.texts.push(...res.rows);
						// 			// console.log('获取的这些数据', this.texts)
						// 			if (this.texts.length < res.total) {
						// 				this.loadMore = true;
						// 				this.pages.pageNum = this.pages.pageNum + 1;
						// 			} else {
						// 				this.loadMore = false;
						// 			}
						// 			this.setWaterFallLayout(res.rows)
						// 			uni.pageScrollTo({
						// 			   scrollTop: this.scrollTop,
						// 			   duration: 0,
						// 			})
						// 		}
						// 	}
						// })
					}
				}
			},
			async setWaterFallLayout(arr) {
				for (let item of arr) {
					try {
						let h = 0
						
						if (item.fileType == 0) {
							if (item.imgPath) {
								if (item.tabType == 3 || item.tabType == 4 || item.tabType == 5) {
									h = (await this.getImgHeight(this.imgBasePath + item.imgPath)) * this.columnWidth + 20
								} else {
									h = (await this.getImgHeight(this.imgBasePath + item.imgPath)) * this.columnWidth + 40
								}
							} else {
								h = 264
							}
						} else if (item.fileType == 1) {
							h = 440
						}
						console.log('瀑布流左右高度', this.leftHeight, this.rightHeight)
						// let h = await this.getImgHeight(this.imgBasePath + item.imgPath)
						if (this.leftHeight <= this.rightHeight) {
							this.leftList.push(item)
							this.leftHeight += h
						} else {
							this.rightList.push(item)
							this.rightHeight += h
						}
					} catch (e) {}

				}
			},
			getImgHeight(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: e => {
							resolve(e.height/e.width)
						},
						fail: e => {
							reject(e)
						}
					})

				})
			}

		},
	}
</script>

<style lang="scss" scoped>
	.tabs_con {
		width: 100%;
		background: #ffff;
		position: fixed;
		top: 0;
	}
	.infolist {
		height: 100vh;
		position: relative;
		&::-webkit-scrollbar {
			display: none !important;
		}
	}

	.goRep {
		position: fixed;
		bottom: 240rpx;
		right: 0;
		width: 256rpx;
		height: 132rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.tab {
		width: 100%;
		// height: 100rpx;
		margin-bottom: 16rpx;
		// margin-top: 48rpx;
		box-sizing: border-box;
		padding: 0 0 0 40rpx;
	}

	.tabCon {
		width: 100%;
		overflow-x: scroll;
		margin-bottom: 8rpx;
		box-sizing: border-box;
		padding: 0 0 0 40rpx;

		&::-webkit-scrollbar {
			display: none;
		}

		.sub {
			display: flex;
			flex-wrap: nowrap;
			margin-bottom: 16rpx;

			.item_act {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 48rpx;
				box-sizing: border-box;
				padding: 8rpx 16rpx;
				background: #3FAA73;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 16rpx;
				white-space: nowrap;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 48rpx;
				box-sizing: border-box;
				padding: 8rpx 16rpx;
				background: #F3F6F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.5);
				margin-right: 16rpx;
				white-space: nowrap;
			}
		}
	}

	.page {
		width: 100%;
		// height: calc(100vh - 80rpx);
		overflow-y: scroll;
		display: flex;
		align-items: flex-start;
		padding: 0 32rpx;
		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none !important;
		}

		.left,
		.right {
			margin: 0 auto;
			width: 48%;
		}

		.mar_bot24 {
			margin-bottom: 24rpx;
		}

		.zx_t {
			font-size: 24rpx;
			font-weight: 400;
			color: #2187FF;
			line-height: 32rpx;
		}

		.no_img {
			width: 100%;
			height: 264rpx;
			background: #ECEFF1;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 24rpx;
			margin-bottom: 24rpx;

			.zx {
				width: 100%;
				height: 160rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				white-space: normal;
			}
		}

		.video_wrap {
			width: 100%;
			height: 440rpx;
			display: flex;
			flex-direction: column;
			border-radius: 24rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 24rpx;
			.play {
				width: 64rpx;
				height: 64rpx;
				display: block;
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				z-index: 9;
			}
		}

		.video_det {
			width: 100%;
			height: 122rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			flex-direction: column;

			.video_per {
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;
				box-sizing: border-box;
				padding: 0 16rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

				.video_per_lf {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
            border-radius: 16rpx;
						display: block;
						margin-right: 12rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: white;
						margin-right: 8rpx;
					}
				}

				.video_per_rt {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						display: block;
            margin-right: 8rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #777F8F;
						line-height: 32rpx;
					}
				}
			}

			.video_loc {
				&_wrap {
					display: flex;
					align-items: center;
				}
        width: 70%;
				min-width: 152rpx;
				display: flex;
				align-items: center;
        justify-content: flex-start;
				height: 42rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				padding: 4rpx 12rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					display: block;
					margin-right: 8rpx;
          flex: 0 0 auto;
				}

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          /* 控制最多显示两行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
				}
			}

		}

		.video {
			width: 100%;
			height: 100%;
		}

		.image {
			width: 100%;
			height: auto;
			margin-bottom: 16rpx;
			border-radius: 24rpx;
		}

		.title {
			width: 100%;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.7);
			line-height: 40rpx;
			overflow: hidden; //溢出隐藏
			text-overflow: ellipsis; //省略号
			white-space: nowrap; //强制文本不换行
		}

		.info {
			width: 100%;
			height: 200rpx;
			background-color: #55aa7f;
		}

		.per {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;
			margin-bottom: 48rpx;

			.per_lf {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
          border-radius: 16rpx;
					display: block;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					line-height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.per_rt {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
					display: block;
          margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #777F8F;
					line-height: 32rpx;
				}
			}
		}
	}
</style>